<template>
  <el-aside class="aside" :style="{ width: asideWidth + 'px' }">
    <Affix>
      <el-scrollbar :style="{ height: winHeight + 'px' }">
        <div
          class="aside-shrink"
          :class="[isCollapse ? 'is-collapse' : '']"
          @click="toggleShrink"
        >
          <i class="aside-shrink__icon iconfont iconfont-2"></i>
        </div>
        <el-menu
          :default-active="defaultIndex"
          :collapse="isCollapse"
          :unique-opened="true"
          :collapse-transition="false"
        >
          <!-- eslint-disable -->
          <el-submenu
            v-for="(item, pIndex) in data"
            v-if="item.visible"
            :index="pIndex + 1 + ''"
            :key="pIndex"
            :popper-append-to-body="false"
          >
            <template slot="title">
              <i class="iconfont submenu-title-icon" :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="(items, cIndex) in item.children">
              <el-menu-item
                v-if="!items.children"
                :key="cIndex"
                :index="pIndex + 1 + '-' + (cIndex + 1)"
                @click="handleClickItem(items.path, cIndex)"
                >{{ items.title }}</el-menu-item
              >
              <el-submenu
                v-else
                :index="pIndex + 1 + '-' + (cIndex + 1)"
                :key="cIndex"
              >
                <span slot="title">{{ items.title }}</span>
                <el-menu-item
                  v-for="(child, index) in items.children"
                  :key="index"
                  :index="pIndex + 1 + '-' + (cIndex + 1) + '-' + (index + 1)"
                  @click="handleClickItem(child.path, index)"
                  >{{ child.title }}</el-menu-item
                >
              </el-submenu>
            </template>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </Affix>
  </el-aside>
</template>
<script>
import Affix from "@/components/affix";
import { mapState, mapMutations } from "vuex";
import { isPermission } from "@/util";

export default {
  components: {
    Affix,
  },
  data() {
    return {
      defaultIndex: "1-1-1",
      isCollapse: false,
      winHeight: document.documentElement.clientHeight,
      data: [
        {
          title: "CPA数据管理",
          icon: "iconfont-3",
          visible: isPermission(["P020"]),
          children: [
            {
              title: "产品数据管理",
              children: [
                {
                  title: "数据报表",
                  path: "/cpa/data-report",
                },
                {
                  title: "数据刷新",
                  path: "/cpa/data-refresh",
                },
                {
                  title: "数据抓取",
                  path: "/cpa/data-grab",
                },
                {
                  title: "业务清单导出",
                  path: "/cpa/data-business",
                },
              ],
            },
            {
              title: "客户&渠道管理",
              children: [
                {
                  title: "客户信息",
                  path: "/cpa/customer-info",
                },
                {
                  title: "产品管理",
                  path: "/cpa/customer-pro",
                },
                {
                  title: "渠道信息",
                  path: "/cpa/channel-info",
                },
                {
                  title: "投放管理",
                  path: "/cpa/channel-pro",
                },
                {
                  title: "产品名称管理",
                  path: "/cpa/product-name",
                },
              ],
            },
            {
              title: "对账管理",
              children: [
                {
                  title: "批量调价(客户)",
                  path: "/cpa/account-customers",
                },
                {
                  title: "批量调价(渠道)",
                  path: "/cpa/account-channels",
                },
                {
                  title: "客户对账",
                  path: "/cpa/account-customer",
                },
                {
                  title: "渠道对账",
                  path: "/cpa/account-channel",
                },
              ],
            },
            {
              title: "结算管理",
              children: [
                {
                  title: "客户月结",
                  path: "/cpa/final-customer-month",
                },
                {
                  title: "客户预收",
                  path: "/cpa/final-customer-receivable",
                },
                {
                  title: "渠道月结",
                  path: "/cpa/final-channel-month",
                },
                {
                  title: "渠道预收",
                  path: "/cpa/final-channel-pay",
                },
                {
                  title: "预收管理",
                  path: "/cpa/final-receivable",
                },
                {
                  title: "预付管理",
                  path: "/cpa/final-pay",
                },
              ],
            },
          ],
        },
        {
          title: "信息流管理",
          icon: "iconfont-5",
          visible: isPermission(["P030"]),
          children: [
            {
              title: "客户管理",
              path: "/flow/customer",
            },
            {
              title: "客户资质管理",
              path: "/flow/customer-aptitude",
            },
            {
              title: "平台管理",
              path: "/flow/platform",
            },
            {
              title: "产品名称管理",
              path: "/flow/product-name",
            },
            {
              title: "产品管理",
              path: "/flow/product",
            },
            {
              title: "账号管理",
              path: "/flow/account",
            },
            {
              title: "账号数据管理",
              path: "/flow/accountdata",
            },
            {
              title: "客户对账",
              path: "/flow/customer-reconciliation",
            },
            {
              title: "结算单管理",
              path: "/flow/statements",
            },
            {
              title: "开票信息管理",
              path: "/flow/invoice",
            },
          ],
        },
        {
          title: "合同管理",
          icon: "iconfont-4",
          visible: isPermission(["P010"]),
          children: [
            {
              title: "客户合同",
              path: "/contract/contract-customer",
            },
            {
              title: "渠道合同",
              path: "/contract/contract-channel",
            },
          ],
        },
        {
          title: "快手上传",
          icon: "iconfont-1",
          visible: isPermission(["P050"]),
          children: [
            {
              title: "计划管理",
              path: "/advertise/advertise",
            },
            {
              title: "快手应用管理",
              path: "/advertise/advertise-administration",
            },
            {
              title: "快手账号管理",
              path: "/advertise/advertise-accountManagement",
            },
             {
              title: "广告组管理",
              path: "/advertise/advertise-group",
            },
            {
              title: "自动搭建(测试)",
              path: "/advertise/advertise-autoBuild",
            },
          ],
        },
        {
          title: "头条上传(特价版)",
          icon: "iconfont-2",
          visible: isPermission(["P060"]),
          children: [
            {
              title: "计划管理",
              path: "/toutiao/toutiao",
            }
          ],
        },
        {
          title: "头条上传(通用版)",
          icon: "iconfont-2",
          visible: isPermission(["P060"]),
          children: [
            {
              title: "计划管理",
              path: "/toutiao-currency/toutiao-currency-toutiao",
            },{
              title: "头条账号管理",
              path: "/toutiao-currency/toutiao-accountManagement",
            },
          ],
        },
        {
          title: "推送账号管理",
          icon: "iconfont-3",
          visible: isPermission(["P070"]),
          children: [
            {
              title: "小时报管理",
              path: "/ding/ding",
            }, {
              title: "日报管理",
              path: "/daily/ding",
            },
          ],
        },
        {
          title: "删除评论",
          icon: "iconfont-4",
          visible: isPermission(["P080"]),
          children: [
            {
              title: "删除快手评论",
              path: "/comments/delete-comments",
            },
            {
              title: "删除快手评论(新版)",
              path: "/comments/delete-comments-new",
            },
             {
              title: "删除头条抖音评论",
              path: "/comments/delete-commentsTT",
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapState(["COLLAPSE"]),
    asideWidth() {
      return this.isCollapse ? 60 : 220;
    },
  },
  watch: {
    $route() {
      this.defaultIndex = this.$route.meta.index;
    },
  },
  methods: {
    ...mapMutations(["SET_COLLAPSE"]),
    toggleShrink() {
      debugger;
      this.isCollapse = !this.isCollapse;
      this.SET_COLLAPSE(this.isCollapse);
    },
    handleClickItem(url) {
      if (this.$route.path !== url) {
        this.$router.push({ path: url });
      }
    },
  },
  created() {
    this.defaultIndex = this.$route.meta.index;
  },
};
</script>

<style lang="scss">
.aside {
  background: #fff;
  border-right: 1px #e6e6e6 solid;
  .el-menu-item,
  .el-submenu__title {
    color: #888 !important;
  }
  .el-submenu__title {
    height: 44px;
    line-height: 44px;
  }
  .el-menu {
    border: 0 none;
    &--collapse {
      width: 60px !important;
    }
  }
  .el-menu-item {
    font-size: 13px;
  }
  .el-menu-item.is-active {
    outline: none;
    background-color: #ecf5ff;
  }
  .submenu-title-icon {
    margin-right: 4px;
  }
  &-shrink {
    padding: 14px 20px 14px 24px;
    text-align: right;
    &__icon {
      display: inline-block;
      vertical-align: top;
      line-height: 24px;
      text-align: center;
      font-size: 15px;
      width: 15px;
      cursor: pointer;
      &:hover {
        color: #04c1fe;
      }
    }
    &.is-collapse {
      transform: rotate(180deg);
    }
  }
}
</style>
